const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  mode: "development",
  entry: path.resolve(__dirname, "./src/index.js"),
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "[name].js",
  },
  //配置loaders
  module: {
    rules: [
      //loader 对应的规则
      //loader 的配置项
      {
        test: /\.(txt|md)$/, //如果文件是.txt或者.md结尾的那么就用这个loader的配置
        use: "raw-loader",
      },

      {
        test: /.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              ["@babel/preset-env", { targets: { chrome: "58", ie: "11" } }],
            ],
          },
        },
      },

      {
        test: /.(png|jpe?g|gif)$/,
        use: {
          loader: "url-loader",
          options: {
            // placeholder 占位符 [name] 源资源模块的名称
            // [ext] 源资源模块的后缀
            name: "[name]_[hash].[ext]", //打包之后图片的名称
            //打包后的存放位置
            outputPath: "./images",
            // 打包后文件的 url
            publicPath: "./images",
            // 小于 100 字节转成 base64 格式
            limit: 1000000000, //字节
          },
        },
      },

      {
        test: /\.css$/,
        // use 里面倒序执行
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/i,
        // i忽略大小写
        use: [
          //use中loader加载是有顺序的，先下后上，注意有的loader需要按照顺序书写
          "style-loader",
          "css-loader",
          "less-loader",
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "My App",
      filename: "myapp.html",
      template: "./src/index.html",
    }),
  ],
};
